<template>
	<view class="wrap" :class="[{'bottom':checkboxValue.length}]">
		<view class="header-wrap">
			<view class="header" style="margin-bottom: 12rpx;">
				<u-icon name="arrow-left" color="#333333" size="24" @click="back"></u-icon>
				<view class="text">添加项目</view>
				<view class="add">添加</view>
			</view>
			<u-search v-model="projectName" placeholder="搜索项目" shape="square" actionText="搜索" :animation="true" @custom="search" @search="search">
			</u-search>
		</view>
		<view class="body">
			<view class="title">
				<view class="text">选择关联项目</view>
				<view class="all">
					<u-checkbox-group v-model="allChecked" iconPlacement="right" placement="column"
						activeColor="#00468C" size="16" v-if="checkboxList.length">
						<u-checkbox @change="allChange" shape="circle" label="全选" name="checked">
						</u-checkbox>
					</u-checkbox-group>
				</view>

			</view>
			<view class="content">
				<u-checkbox-group v-model="checkboxValue" @change="checkboxChange" :borderBottom="true"
					placement="column" iconPlacement="right" size="16" activeColor="#00468C">
					<u-checkbox shape="circle" labelSize="15" labelColor="#333"
						v-for="(item, index) in checkboxList" :key="index" :label="item.project_name"
						:name="item.project_id">
					</u-checkbox>
				</u-checkbox-group>
				<view class="empty" v-if="!checkboxList.length">没有可关联的项目哦！</view>
			</view>
		</view>
		<view class="footer">
			<view class="checkboxBox">
				 <u-checkbox-group placement="column" iconPlacement="right" size="16" activeColor="#00468C"  v-model="isAddDriver">
					<u-checkbox :borderBottom="true"
					 label="授权司机自动添加新建项目" name='1'></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- <view class="disable" v-if="!checkboxValue.length">确定</view> -->
			<view class="submit" @click="showModal = true">确定</view>
		</view>
		<u-modal :show="showModal" content='确定要添加勾选的项目？' :closeOnClickOverlay="true" @confirm="confirm"
			@cancel="showModal = false" @close="showModal = false" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	import {
		getAllReject
	} from '@/config/api/app.js'
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				showModal: false,
				projectName: '',
				allChecked: [],
				checkboxValue: [],
				checkboxList: [],
				user_project_id: [],
				user_project: [],
				type: null,
				isAddDriver: [], //授权司机自动添加新建项目
				selSlot:1
			}
		},
		async onLoad(options) {
			this.type = options.type
			if(Cache.get("isAddDriver") == 1){
				this.isAddDriver = ['1']
			}else{
				this.isAddDriver = []
			}
			await this.getProject()
		},
		methods: {
			//	获取项目
			getProject() {
				let params = {
					projectName: this.projectName
				}
				getAllReject({
					params: params,
					custom: {
						title: '获取项目……'
					}
				}).then((res) => {
					console.log(this.selectProject)
					if (res.code == 0) {
						
						if (!this.selectProject || !this.selectProject.length) {
							this.checkboxList = res.data.project
						} else {
							this.checkboxList = res.data.project.filter(item => {
								return !this.selectProject.find(prop => {
									return prop.project_id == item.project_id
								})
							})
						}
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			back() {
				uni.navigateBack()
			},
			search(e) {
				this.projectName = e
				this.getProject()
			},
			allChange(e) {
				if (e) {
					this.checkboxList.forEach(item => {
						this.checkboxValue.push(item.project_id)
					})
				} else {
					this.checkboxValue = []
				}
			},
			checkboxChange(e) {
				this.checkboxValue = e
				if (this.checkboxValue.length === this.checkboxList.length) {
					this.allChecked = ["checked"]
				} else {
					this.allChecked = []
				}
			},
			//	添加项目
			confirm() {
				this.showModal = false
				let list = this.checkboxList.filter(item => {
					return this.checkboxValue.find(prop => {
						return prop == item.project_id
					})
				})
				Cache.set("isAddDriver",this.isAddDriver.length?1:0)
				// localStorage.setItem('isAddDriver',this.isAddDriver.length?1:0)
				if (this.type == 1) {
					list.push(...this.selectProject)
					
					this.SAVESELECTPROJECT(list)
					uni.navigateBack({
						delta: 2
					})
				} else {
					this.SAVESELECTPROJECT(list)
					uni.navigateBack()
				}
			},
			...mapMutations(['SAVESELECTPROJECT'])
		},
		computed: {
			...mapGetters(['selectProject'])
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.u-checkbox{
		padding: 28rpx 0!important;
	}
	.u-border-bottom {
		border-bottom: 1rpx solid #F5F7FB;

		&:last-child {
			border-bottom: none;
		}
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 236rpx 0 calc(182rpx + env(safe-area-inset-bottom));
	}

	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #9E9E9E;
		line-height: 66rpx;
		padding: 150rpx 0;
	}

	.header-wrap {
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 100rpx 24rpx 16rpx;
		background: #fff;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.text {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.add {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			opacity: 0;
		}
	}

	.body {
		width: 100wh;
		height: 100%;
		overflow: auto;
		background: #FAFAFA;

		.content {
			padding: 0 32rpx 12rpx;
			background: #fff;
			margin-bottom: 20rpx;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx 6rpx 0;
			margin-top: 24rpx;
			background: #fff;

			.all {
				width: 110rpx;
			}

			.text {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				position: relative;
				padding-left: 32rpx;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 10rpx;
					width: 8rpx;
					height: 32rpx;
					background: #003E81;
				}
			}
		}
	}

	.footer {
		position: absolute;
		left: 0;
		background: #FFFFFF;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		width: 100vw;
		padding: 0 32rpx;
		box-sizing: border-box;

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}

		.disable {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: #DCDCDC;
		}
		.checkboxBox{
			padding: 10rpx 2rpx;
			border-top: 2rpx solid #c7c7c7;
		}
	}
</style>
